import React, { useEffect, useState } from 'react';
import { $getImg } from '../../api/getImgapi';
import { Input,Button} from 'antd';
const { TextArea } = Input;
import {HeartOutlined,MessageOutlined} from '@ant-design/icons';
const SubComments = ({SubComment}) =>{
    const [subComments1,setSubComment1]= useState([]);
    //转换时间
const [formattedDateTime,setFormattedDateTime]=useState('');
        //获取子评论个人头像
        const [data,setData]=useState(null);
        useEffect(()=>{
          const response=$getImg({ studentId: SubComment.studentId.toString() });
          response.then((result) => {
            if(result.code===1){
              const { data } = result;
              console.log(SubComment);
              setData(data);
            }
            });
        // 使用Date对象解析原始日期时间字符串
      const originalDateTime = new Date(SubComment.createdAt);
      // 获取所需的日期时间格式，例如 "YYYY-MM-DDTHH:MM"
      setFormattedDateTime( originalDateTime.toISOString().slice(0, 10))
            setSubComment1(SubComments.sonComments);
        },[])
      //点击头像函数
    //   const handleAvatarClick = (studentId) => {
    //     navigate(`/othermine/${studentId}`);
    //   };
    //点赞评论事件
    // const Like=()=>{
    //         const response=$
    // }
    return(
        <div>
                <div className="AuthorInfo" style={{marginBottom:"20px",marginLeft:"40px"}}>
                    <div style={{display:'flex'}}>
                    <img src={`data:image/jpeg;base64,${data}`}  alt="获取图片失败" style={{ width:'30px',height:'30px', marginRight:'5px'}} />
                        <div style={{display: 'flex',marginTop:'5px'}}>
                            <span>{SubComment.nickname}</span>
                            <span style={{marginLeft:'20px'}}>{'回复@'+SubComment.replyName}</span>
                        </div>
                    </div>
                </div>
                <p>{SubComment.content}</p>
                    <div style={{marginBottom:'20px',display:'flex',justifyContent:"space-between",alignItems:'center'}}>
                    <span className='right'>{formattedDateTime}</span>
                    <span>
                    <Button icon={<HeartOutlined/>} style={{border: 'none'}} onClick={Like}>{SubComment.likeNum}</Button>
                    <Button icon={<MessageOutlined/>} style={{border: 'none'}}>回复</Button>
                    </span>
                    </div>
            {subComments1&&subComments1.map((subComment, index) => (
                <SubComments key={index} SubComment={subComment} />
            ))}
        </div>
    )
}
export default SubComments;